<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import Upload from '@/components/Upload.vue'
import AntIcon from '@/components/AntdIcon/index.vue'
import { addBannerApi, updateBannerApi } from '@/service'

const emit = defineEmits(['addBanner'])
const modalRef = ref()
const formRef = ref()
const formData = ref({
  carousel_url: '',
  carousel_title: '',
  carousel_link: '',
})

const rules = {
  carousel_url: [{ required: true, message: '请上传轮播图' }],
  carousel_title: [{ required: true, message: '请输入轮播图标题' }],
  carousel_link: [{ required: true, message: '请输入跳转地址' }],
}

const upload = ({ download_url }) => {
  formData.value.carousel_url = download_url
}

const submit = () => {
  const { carousel_url, carousel_title, carousel_link, id } = formData.value
  formRef.value.validate().then(() => {
    if (id) {
      updateBannerApi({ carousel_id: id, carousel_url, carousel_title, carousel_link }).then(() => {
        emit('addBanner')
        close()
      })
    } else {
      addBannerApi({ carousel_url, carousel_title, carousel_link }).then(() => {
        emit('addBanner')
        close()
      })
    }
  })
}

const open = (params) => {
  if (params) {
    formData.value = params
  }
  modalRef.value.open()
}

const close = () => {
  formData.value = {
    carousel_url: '',
    carousel_title: '',
    carousel_link: '',
  }
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <Modal ref="modalRef" :title="formData.id ? '编辑轮播图' : '创建轮播图'" @cancel="close">
    <a-form ref="formRef" :model="formData" :rules="rules" autocomplete="off">
      <a-form-item label="轮播图标题" name="carousel_title">
        <a-input v-model:value="formData.carousel_title" placeholder="请输入轮播图标题">
          <template #prefix> <AntdIcon icon="PictureOutlined" /> </template>
        </a-input>
      </a-form-item>
      <a-form-item label="跳转地址" name="carousel_link">
        <a-input v-model:value="formData.carousel_link" placeholder="请输入跳转地址">
          <template #prefix> <AntdIcon icon="PictureOutlined" /> </template>
        </a-input>
      </a-form-item>
      <a-form-item label="轮播图图片" name="carousel_url">
        <div class="flex items-center gap-5">
          <div class="flex flex-col items-center gap-2">
            <a-image :width="200" :src="formData.carousel_url" v-if="formData.carousel_url" />
            <span class="text-[#999]">图片推荐尺寸: 1905*381 (5:1)</span>
          </div>
          <Upload @uploadSuccess="upload">
            <div
              class="size-20 rounded-[6px] flex items-center justify-center border border-[#eee] cursor-pointer"
            >
              <AntIcon :icon="formData?.id ? 'EditOutlined' : 'PlusOutlined'" size="20px" />
            </div>
          </Upload>
        </div>
      </a-form-item>
      <div class="flex justify-end gap-5">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-form>
  </Modal>
</template>
